<script setup lang="ts">
import { RouterLink, RouterView, useRoute } from 'vue-router';
import { 
  IconHome, 
  IconFileImage, 
  IconInfoCircle, 
  IconUser, 
  IconApps, 
  IconBarChart,
  IconScissor
} from '@arco-design/web-vue/es/icon';
import { ref, computed, onMounted, watch } from 'vue';

const route = useRoute();
const currentPath = ref('/');

onMounted(() => {
  currentPath.value = route.path;
});

watch(() => route.path, (newPath) => {
  currentPath.value = newPath;
});
</script>

<template>
  <div class="app">
    <a-layout class="layout">
      <a-layout-header class="header">
        <div class="logo">
          <img src="/logo.png" alt="Logo" class="logo-image" />
          <span class="logo-text">ZNK肺部CT图像辅助诊断系统</span>
        </div>
        <a-menu mode="horizontal" :selected-keys="[currentPath]">
          <router-link to="/">
            <a-menu-item key="/">
              <template #icon><icon-home /></template>
              首页
            </a-menu-item>
          </router-link>
          <router-link to="/workflow">
            <a-menu-item key="/workflow">
              <template #icon><icon-apps /></template>
              诊断工作流
            </a-menu-item>
          </router-link>
          <router-link to="/image-preview">
            <a-menu-item key="/image-preview">
              <template #icon><icon-file-image /></template>
              CT图像预览
            </a-menu-item>
          </router-link>
          <router-link to="/nifti-slicer">
            <a-menu-item key="/nifti-slicer">
              <template #icon><icon-scissor /></template>
              3D切片处理
            </a-menu-item>
          </router-link>
          <router-link to="/statistics">
            <a-menu-item key="/statistics">
              <template #icon><icon-bar-chart /></template>
              统计分析
            </a-menu-item>
          </router-link>
          <router-link to="/about">
            <a-menu-item key="/about">
              <template #icon><icon-info-circle /></template>
              关于
            </a-menu-item>
          </router-link>
        </a-menu>
        <div class="user-info">
          <a-avatar>
            <icon-user />
          </a-avatar>
          <span class="user-name">医生名称</span>
        </div>
      </a-layout-header>
      
      <a-layout-content class="content">
        <RouterView />
      </a-layout-content>
      
      <a-layout-footer class="footer">
        © 2025 ZNK肺部CT图像辅助诊断系统 版权所有
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--color-text-1);
  background-color: var(--color-fill-2);
  line-height: 1.5;
}

.app {
  min-height: 100vh;
}

.layout {
  height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-md);
  background-color: var(--color-bg-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  justify-content: flex-start;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: rgb(var(--primary-6));
  margin-right: var(--spacing-xl);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  min-width: 300px;
}

.logo-image {
  height: 32px;
  width: 32px;
  margin-right: 8px;
  object-fit: contain;
}

.logo-text {
  white-space: nowrap;
}

.user-info {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: var(--spacing-md);
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.content {
  padding: 0;
  overflow: auto;
}

.footer {
  text-align: center;
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-bg-2);
  color: var(--color-text-3);
  font-size: 12px;
  letter-spacing: 0.5px;
}

:deep(.arco-menu) {
  flex: 1;
  border-bottom: none;
}

:deep(.arco-layout-header) {
  height: 64px;
  line-height: 64px;
}

:deep(.arco-menu-horizontal .arco-menu-inner) {
  padding: 0;
}

:deep(.arco-menu-horizontal > .arco-menu-item) {
  height: 64px;
  line-height: 64px;
  margin: 0 2px;
  padding: 0 8px;
  font-weight: 500;
  white-space: nowrap;
}

:deep(.arco-menu-item-inner) {
  white-space: nowrap;
}

:deep(.arco-menu-item a) {
  color: inherit;
  text-decoration: none;
}

:deep(.arco-menu) router-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

:deep(.arco-menu-light .arco-menu-selected) {
  color: rgb(var(--primary-6));
  font-weight: 600;
}

:deep(.arco-menu-light .arco-menu-item:hover) {
  color: rgb(var(--primary-5));
}

:deep(.arco-avatar) {
  background-color: rgb(var(--primary-2));
  color: rgb(var(--primary-6));
}
</style>
